Форум

Voronar · #1 (**permalink**) 15.02.2013, 10:52

Здравствуйте. Есть такая задача.
Имеется текстовый файл со значением, например, температуры, который постоянно обновляется. Он лежит на сервере. Я хочу, чтобы значение температуры(этого файла) отображалось в реальном времени на веб-странице(без php).
Пока получилось только единожды, при прогрузке всех DOM-объектов, отобразить содержимое этого файла. Делал так:

<!DOCTYPE html>
<html>
  <head>
    <script type='text/javascript' src='jquery.min.js'></script>
  </head>
  
  <body>
    <script type="text/javascript">
    
            $(document).ready(function()
            {
                $('#div1').load('text.txt');
            });
            
    </script>
    
      <input type="button" id="b1" value="Push" />
      <div id="div1">Div</div>
    
  </body>
</html>

Помогите пожалуйста реализовать поставленную задачу.
Есть ли какой-то метод у jquery, который мне поможет или нужно самому писать бесконечный цикл(который мне, кстати, ничего не дал)?

danik.js · #2 (**permalink**) 15.02.2013, 10:56

Ну в реальном времени не получится (это тогда вам в сторону веб-сокетов смотреть). А вот периодическая проверка - раз в пять сек например - легко. Смотрите setTimeout.

Voronar · #3 (**permalink**) 15.02.2013, 11:20

Пробовал вот так:

<!DOCTYPE html>
<html>
  <head>
    <script type='text/javascript' src='jquery.min.js'></script>
  </head>
  
  <body>
    <script type="text/javascript">
    
            $(document).ready(function()
            {
               while(true)
               {
                 setTimeout(function() { $('#div1').load('text.txt') }, 5000);
               }
            });
            
    </script>
    
      <input type="button" id="b1" value="Push" />
      <div id="div1">Div</div>
    
  </body>
</html>

В итоге получилась бесконечно загружающаяся страница.

Я думал о таком варианте: сделать загрузку из файла по событию движения мышью. Но это не то.)

Voronar · #4 (**permalink**) 15.02.2013, 11:21

А что дадут веб-сокеты? Вы с ними работали?
А как бы Вы реализовали периодическую проверку?

danik.js · #5 (**permalink**) 15.02.2013, 11:26

Voronar, по setTimeout обновляете свою температуру, причем при вызове load() вторым параметром передаете callback-функцию, вызываемую по окончанию загрузки. В ней то и вновь вызываете setTimeout. В итоге получается цикл:

setTimeout -> load() -> setTimeout() -> load() ...

Сообщение от Voronar

А что дадут веб-сокеты? Вы с ними работали?

Дадут realtime, так как сервер будет сам уведомлять об изменении. Нет, не работал.

Сообщение от Voronar

А как бы Вы реализовали периодическую проверку?

Уже ответил.

Voronar · #6 (**permalink**) 15.02.2013, 11:43

Я не совсем до конца понял... У меня какая-то рекурсия в голове.
А можете показать на коде?

Voronar · #7 (**permalink**) 15.02.2013, 11:56

Получилось сделать вот так:

<!DOCTYPE html>
<html>
  <head>
    <script type='text/javascript' src='jquery.min.js'></script>
  </head>
  
  <body>
    <script type="text/javascript">
			function ddata()
			{
              $(document).ready(function()
              {
                setTimeout(function() { $('#div1').load('text.txt', ddata) }, 2000);
				
              });
			}
			ddata();        
    </script>
    
         
      <input type="button" id="b1" value="Push" />
      <div id="div1">Div</div>
    
    
  </body>
</html>

Только не знаю, грамотно ли это.

danik.js · #8 (**permalink**) 15.02.2013, 12:02

(function queue() {
    setTimeout(function(){
        $('#div1').load('text.txt', queue);
    }, 5000);
})();

Разложу на 2 функции чтоб понятнее было:

function queue() {
    setTimeout(update, 5000);
}
function update() {
    $('#div1').load('text.txt', queue);
}
queue();

danik.js · #9 (**permalink**) 15.02.2013, 12:04

Voronar, молодец.

Сообщение от Voronar

грамотно ли это

Почти, только нужно не $(document).ready внутри ddata, а наоборот

Voronar · #10 (**permalink**) 15.02.2013, 12:08

Да, я поменял наоборот.

<!DOCTYPE html>
<html>
  <head>
    <script type='text/javascript' src='jquery.min.js'></script>
  </head>
  
  <body>
    <script type="text/javascript">
			
              $(document).ready(function()
              {
			  function ddata()
			  {
                setTimeout(function() { $('#div1').load('text.txt', ddata) }, 1000);
			  }
			  ddata();
              });
			
			
			
			$(document).ready(function()
			{
              $("#b1").click(function()
			  {
				alert("Worked!");
              });
			});


			
    </script>
    
         
      <input type="button" id="b1" value="Push" />
      <div id="div1">Div</div>
    
    
  </body>
</html>

и это стало работать нормально.

Форум

Справочник

Discord чат

Курсы javascript